<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { LoginForm } from './components'
import { LocaleDropdown } from '@/components/LocaleDropdown'
import { useI18n } from '@/hooks/web/useI18n'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('login')
const baseUrl = import.meta.env.VITE_BASE_PATH as string
// const appStore = useAppStore()

const { t } = useI18n()

// 背景圖容器
const bgShow = ref('')
// 背景圖選項包
const bgImgList1 = ['Mobg1.jpg', 'Mobg2.jpg', 'Mobg3.jpg']
const bgImgList2 = ['Afbg1.jpg', 'Afbg2.jpg', 'Afbg3.jpg']
const bgImgList3 = ['Nibg1.jpg', 'Nibg2.jpg', 'Nibg3.jpg']
// 根據時間隨機轉變背景圖
function changeImg() {
  const date = new Date()
  const hour = date.getHours()
  if (hour >= 6 && hour < 12) bgShow.value = baseUrl + bgImgList1[Math.floor(Math.random() * 3)]
  else if (hour >= 12 && hour < 18)
    bgShow.value = baseUrl + bgImgList2[Math.floor(Math.random() * 3)]
  else bgShow.value = baseUrl + bgImgList3[Math.floor(Math.random() * 3)]
}
onMounted(async () => {
  init()
})
const init = async () => {
  changeImg()
}
</script>

<template>
  <!-- <xl:bg-v-dark -->
  <div
    :style="{
      background: 'url(' + bgShow + ')',
      width: '100%',
      height: '100%',
      backgroundSize: 'cover',
      position: 'center'
    }"
    :class="prefixCls"
    class="h-[100%] relative overflow-hidden <sm:px-10px <xl:px-10px <md:px-10px"
  >
    <Transition>
      <div
        class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px @lg:max-w-500px"
      >
        <LoginForm
          style="background-color: white"
          class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"
        />
      </div>
    </Transition>
    <!-- </div>
    </div> -->
    <div class="langDiv"
      >{{ t('common.switchLanguage') }}:<div><LocaleDropdown /></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.langDiv {
  font-size: 16px;
  color: white;
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  div {
    margin-top: 2px;
    padding-left: 5px;
  }
}
@prefix-cls: ~'@{namespace}-login';

.@{prefix-cls} {
  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/svgs/login-bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      content: '';
    }
  }
}
.text-3xl {
  text-align: center;
}
</style>
